<template>
	<div
		@click="useSearchGameStore().show()"
		class="flex flex-grow items-center mr-[10px] h-[40px] rounded-lg border border-border-1 bg-bg-3 app-bg-react max-w-[100px] md:max-w-full"
		:class="expanded ? ' px-[10px]' : ' px-[9px]'">
		<base-icon class="text-[20px] flex-shrink-0" name="search"></base-icon>
		<input
			v-if="expanded"
			readonly
			class="ml-2 w-[20px] flex-1 bg-transparent outline-none text-t-2 placeholder:text-t-2"
			:placeholder="$t('action.search')" />
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { useSearchGameStore } from '@/store'
defineProps({
	expanded: {
		type: Boolean,
		default: true
	}
})
</script>
